<script setup lang="ts">
import {
  NButton,
  NCard,
  NForm,
  NFormItem,
  NGi,
  NGrid,
  NInputNumber,
  NLayout,
  NSpace,
} from "naive-ui";
import { useRouter, useRouterName } from "@/plugins/router";
import { useConfigStore } from "@/plugins/store";
import ObjectForm from "@/components/block/ObjectForm.vue";

const { toName } = useRouter();
const { animation } = useRouterName();

const store = useConfigStore();
</script>

<template>
  <NLayout position="absolute">
    <NSpace justify="center" align="center" class="tw-h-screen tw-p-8">
      <NSpace vertical align="center">
        <NGrid cols="2" x-gap="12" y-gap="8">
          <NGi span="2">
            <NCard>
              <template #header> 动画参数 </template>
              <NSpace vertical>
                <NForm inline>
                  <NFormItem label="运算时间">
                    <NInputNumber
                      v-model:value="store.global.time"
                      min="1"
                      max="9999"
                      step="0.1"
                    />
                  </NFormItem>
                  <NFormItem label="速度">
                    <NInputNumber
                      v-model:value="store.global.speed"
                      min="0"
                      step="0.01"
                    />
                  </NFormItem>
                </NForm>
                <NForm inline disabled>
                  <NFormItem label="x轴最大">
                    <NInputNumber :value="store.xMax" />
                  </NFormItem>
                  <NFormItem label="y轴最大">
                    <NInputNumber :value="store.yMax" />
                  </NFormItem>
                </NForm>
              </NSpace>
            </NCard>
          </NGi>
          <NGi>
            <NCard>
              <template #header>物体1</template>
              <ObjectForm type="first" />
            </NCard>
          </NGi>
          <NGi>
            <NCard>
              <template #header>物体2</template>
              <ObjectForm type="second" />
            </NCard>
          </NGi>
        </NGrid>
        <NButton @click="toName(animation)" type="primary">开始</NButton>
      </NSpace>
    </NSpace>
  </NLayout>
</template>
